<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请假申请</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>
<div id="app">
    <div style="text-align: center;">
        <h1>请假申请</h1>
        <div>
            <el-form :model="form" cell-style="margin:0px auto;">
                <el-form-item label="ID" v-if="show" :label-width="formLabelWidth">
                    <el-input v-model="form.id" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工ID" :label-width="formLabelWidth">
                    <el-input v-model="form.userid" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="申请人" :label-width="formLabelWidth">
                    <el-input v-model="form.username" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth">
                    <el-input v-model="form.telephone" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="请假类型" :label-width="formLabelWidth">
                    <el-select v-model="form.leavetype" placeholder="请选择">
                        <el-option label="事假" value="事假"></el-option>
                        <el-option label="病假" value="病假"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="紧急程度" :label-width="formLabelWidth">
                    <el-select v-model="form.urge" placeholder="请选择">
                        <el-option label="一般" value="一般"></el-option>
                        <el-option label="很急" value="很急"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" :label-width="formLabelWidth">
                    <el-input v-model="form.begintime" v-if="form.id!=null" :disabled="true" autocomplete="off"></el-input>
                    <el-date-picker
                            v-model="form.begintime"
                            v-else
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            @change="begintime"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" :label-width="formLabelWidth">
                    <el-input v-model="form.endtime" v-if="form.id!=null" :disabled="true" autocomplete="off"></el-input>
                    <el-date-picker
                            v-model="form.endtime"
                            v-else
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            @change="endtime"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="申请时间" v-if="form.id!=null" :label-width="formLabelWidth">
                    <el-input v-model="form.applydate" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-else></el-form-item>
                <el-form-item label="凭据" :label-width="formLabelWidth">
                    <el-upload
                            class="avatar-uploader"
                            action="/commonOSS/upload"
                            name="file"
                            :auto-upload="true"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="请假理由" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.reason">
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="primary" @click="add()">确 定 申 请</el-button>
    </div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            form:{begintime:'',endtime:''},
            formLabelWidth:"120px",
            imageUrl:''
        },
        created:function(){
            this.loadData();
        },
        methods:{
            loadData:function () {
                //初始化数据
                axios.get('/leave/leaveOne').then(function (response) {
                    if (response.data.code==2001) {
                        app.form = response.data.dataBack;
                        app.imageUrl=response.data.dataBack.filepath;
                    }
                    if (response.data.code==2002){
                        app.form=response.data.dataBack;
                    }
                })
            },
            //成功上传处理
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                //alert(file.response);
                //alert(JSON.stringify(file.response));
                this.imageUrl=file.response.ossFileUrlBoot;
                this.form.filepath=file.response.ossFileUrlBoot;
                // this.form.fileName=file.response.oldFileName;
                // this.form.filePath=file.response.newFilePath;
            },
            //上传前的处理（判断图片大小）
            beforeAvatarUpload(file) {
                // const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                /*  if (!isJPG) {
                      this.$message.error('上传头像图片只能是 JPG 格式!');
                  }*/
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            begintime(val){
                app.form.begintime = val;
            },
            endtime(val){
                app.form.endtime=val;
            },
            add:function () {//提交申请
                axios.post('/leave/addLeave',app.form).then(function (response) {
                    if(response.data == 1){
                        //提示成功
                        app.$message({
                            message: '恭喜你，提交申请成功',
                            type: 'success'
                        });
                        //重新加载数据
                        this.loadData();
                    }else {
                        app.$message({
                            message: '你已经请过假了',
                            type: 'success'
                        });
                    }
                })
            }
        }
    });
</script>
</body>
</html>